<template>
<div class="production_box">
  <div class="member_title">基本信息</div>
  <el-table
      :data="production"
      border
      align="center"
      style="margin: 30px 0">
    <el-table-column
        label="队伍名称"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.groupName"
            placeholder="队伍名称"
        ></el-input>
        <el-tag v-if="!scope.row.edit" type="success">{{ scope.row.groupName }}</el-tag>
<!--        <span v-if="!scope.row.edit">{{ scope.row.groupName }}</span>-->
      </template>
    </el-table-column>
    <el-table-column
        label="作品名称"
        align="center">
      <template slot-scope="scope">
        <el-input
            v-if="scope.row.edit"
            v-model="scope.row.work"
            placeholder="作品名称"
        ></el-input>
        <el-tag v-if="!scope.row.edit">{{ scope.row.work }}</el-tag>
<!--        <span v-if="!scope.row.edit">{{ scope.row.work }}</span>-->
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template slot-scope="scope">
        <el-button
            v-show="!scope.row.edit"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"><i class="el-icon-edit"></i></el-button>
        <el-button
            v-show="scope.row.edit"
            size="mini"
            @click="handleCancel(scope.$index, scope.row)"
            style="margin-left: 0">取消</el-button>
        <el-button
            v-show="scope.row.edit"
            size="mini"
            type="success"
            @click="handleSave(scope.$index, scope.row)">保存</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
</template>

<script>

export default {
  name: "production",
  props: ['team'],
  data() {
    return{
      production: [],
      oldObj: {} // 作为中间件使用，用于储存修改前的值，方便回滚
    }
  },
  methods: {
    // 编辑
    handleEdit(index, row) {
      row.edit = !row.edit;
      this.oldObj = {...this.production[index]}
    },

    // 取消
    handleCancel(index,row){
      row.edit = !row.edit;
    },

    // 保存
    handleSave(index,row) {
      if(row.groupName && row.work){
        row.edit = !row.edit;
        let data = {};
        data.groupName = row.groupName;
        data.title = row.work;
        data.groupID = window.sessionStorage.getItem("groupID");
        this.$api.updateBasicInformation(data)   // 提交修改
            .then(res => {
              if (res.success){
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                window.sessionStorage.setItem("team",JSON.stringify(row))
              } else {
                location.reload();
                this.$message({
                  type: 'warning',
                  message: '修改失败'
                })
              }
            })
        this.production[index] = row;
      } else {
        this.$message.warning("请完善信息！");
      }
    }
  },
  watch: {
    team(value){
      value.edit = false;
      let a = JSON.stringify(value);
      this.production.push(JSON.parse(a));
    }
  }
}
</script>

<style lang="less" scoped>
.production_box{
  .member_title{
    border-left: 15px solid darkgreen;
    padding-left: 10px;
    font-size: 25px;
    font-weight: bolder;
  }
}
</style>
